<template>
  <div>
    <el-dialog
      :title="$t('common.modify')"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('SubAccountManagementLang.Account_name')}}:
            </div>
            <div class="contant">
              <el-input
                ref="name"
                @blur="handleBlur('name',$event)"
                @focus="handleFocus($event)"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.name"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              {{$t('SubAccountManagementLang.Telephone')}}:
            </div>
            <div class="contant iphoneClass">
              <el-input
                ref="mobile"
                @focus="handleFocus($event)"
                @input="handleInput"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.mobile"
              >
                <el-popover style="min-width:100px;"  class="accountTitle" slot="prepend" placement="bottom" trigger="click" ref="popoverRefLang">
                  <ul style="margin: 0;height:100%;overflow:auto;cursor: pointer;">
                    <li
                      :style="{
                        backgroundColor:data.area_code == item.name? '#fff065': '#fff',
                        padding:'5px 0 5px 10px'
                      }"
                      v-for="item in PhoneAreaCodeList"
                      :key="item.id"
                      @click="handleChangePhoneAreaCode(item)"
                    >
                      <img style="width: 20px;margin-right:10px;" :src="$baseUrl+item.icon" alt="">
                      <span>{{item.code}}</span>
                    </li>
                  </ul>
                  <span style="cursor: pointer;display: flex; align-items: center;" slot="reference">
                    <img :src="$baseUrl+''+PhoneAreaIcon" alt="">
                    <div style="margin-left:5px;">{{data.area_code}}</div>
                  </span
                  >
                </el-popover>
              </el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              {{$t('SubAccountManagementLang.belong_to')}}:
            </div>
            <div class="contant">
              <el-select
                filterable
                v-model="data.bind_sales_uid"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_sale"
                  :key="item.id"
                  :label="item.name"
                  :value="item.uid"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              {{$t('SubAccountManagementLang.mailbox')}}:
            </div>
            <div class="contant">
              <el-input
                ref="email"
                @focus="handleFocus($event)"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.email"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              {{$t('CustomerManagementLang.password')}}:
            </div>
            <div class="contant">
              <el-input
                style="-webkit-text-security:disc"
                ref="password"
                @blur="handleBlur('password',$event)"
                @focus="handleFocus($event)"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.password"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
import { validateEmail } from '@/utils/func.js'
export default {
  components: {},
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      PhoneAreaIcon:'',
      PhoneAreaCodeList:[],
      data: {},
      uid:"",
      options_sale:[],
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.getPhoneAreaCodeList()
      this.Visible = true;
      this.uid = data.uid;
      this.getData();
    },
    getPhoneAreaCodeList(){
      //获取区号列表
      this.$get("getPhoneAreaCode").then((res) => {
        if(res.success){
          this.PhoneAreaCodeList = res.data;
        }
        this.$get("childMembers",{limit:-1}).then((res) => {
          if(res.success){
            this.options_sale = res.data.filter(item=>{return item.uid!==this.uid})
            let userData=JSON.parse(sessionStorage.getItem("userData"))
            this.options_sale.unshift({id:0,uid:userData.uid,name:userData.nickname})
          }
        });
      });
    },
    handleChangePhoneAreaCode(item){
      this.PhoneAreaIcon=item.icon
      this.data.area_code=item.code
    },
    //获取单条
    getData() {
      this.$get("memberinfo", { uid: this.uid }).then((res) => {
        this.data = res.data;
        let current_phone = this.PhoneAreaCodeList.filter(item=>{return item.code==this.data.area_code})
        if(current_phone.length>0){
          this.PhoneAreaIcon=current_phone[0].icon
        }
      });
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.mobile&&!this.data.email){
        this.$message.warning(this.$t('AccountLang.message'));
        this.$refs.mobile.$el.childNodes[1].style.border='1px solid red'
        this.$refs.email.$el.childNodes[1].style.border='1px solid red'
      }
      if(!!this.data.email){
        if(!validateEmail(this.data.email)){
          this.$message.warning(this.$t('AccountLang.message_email'));
          this.$refs.email.$el.childNodes[1].style.border='1px solid red'
          type=false
          return
        }
      }
      if (type && this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000);
          let params = new FormData();
          params.append("uid", this.uid);
          params.append("area_code", this.data.area_code);
          params.append("name", this.data.name);
          params.append("mobile", this.data.mobile);
          params.append("bind_sales_uid", this.data.bind_sales_uid);
          params.append("email", this.data.email);
          if(this.data.password.trim().length>0){
            params.append("password", this.data.password);
          }
          this.$postForm("memberEdit", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
        }
    },
    //取消
    cancel() {
      this.data = {};
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
          event.target.style.border = "1px solid red";
        }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    handleInput(value) {
      // 只允许输入数字
      this.data.mobile = value.replace(/[^\d]/g, '');
    }
  },
};
</script>

<style scoped lang="less" >
.Span{
  width: 50%;
}
.iphoneClass{
  position: relative;
  /deep/.el-input__inner{
    padding-left: 105px;
  }
  /deep/.el-input-group__prepend{
    position: absolute;
    width: 100px;
    top: 1px;
    left: 2px;
    border: 0;
    height: 32px;
    padding: 0;
  }
}
.accountTitle{
  display: flex;
  align-items: center;
  justify-content: center;
  /deep/.el-popover__reference{
    height: 34px;
  }
  img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
}
</style>